<template>
	<div class="content-box">
		<div class="flex flexB flexL">
			<!-- <div class="font18 bold mb20 dark-font">
				{{ $t('operation.TotalUsers') }}：{{ setTotal }}
			</div> -->
			<!-- <div>
				<el-form ref="formRef" :inline="true" :model="state.queryForm" @submit.native.prevent @keyup.enter="getDataListTab()">
					<el-form-item>
						<el-button type="primary" @click="addOrUpdateHandle({}, false)" v-if="hasRule('PagenSystem/adepartment/index/xz')">赠送</el-button>
					</el-form-item>
					<el-form-item>
						<el-input v-model="state.queryForm.buyer_name" :placeholder="$t('invite.searchaccount')" clearable style="width:300px;"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button @click="getDataListTab()" type="primary">{{ $t('query') }}</el-button>
						<el-button @click="resetSearchTab()" type="default">{{ $t('resetting') }}</el-button>
					</el-form-item>
				</el-form>
			</div> -->
		</div>
		<el-table ref="tableRef" :height="tableHeight" v-loading="state.dataListLoading" :data="setList" border style="width: 100%" @selection-change="handleSelectionChange">
			<!-- <el-table-column prop="id" label="ID" header-align="center" align="center" width="90">
				<template #default="scope">
					{{ (state.page - 1) * (state.limit) +  scope.$index + 1 }}
				</template>
			</el-table-column> -->
			<!-- <el-table-column prop="created_at" label="建立时间" header-align="center" align="center"></el-table-column> -->
			<el-table-column prop="created_at" :label="$t('created_at')" header-align="center" align="center" width="200"></el-table-column>
			<el-table-column prop="request_id" :label="$t('push.request_id')" header-align="center" align="center" width="200"></el-table-column>
			<el-table-column prop="title" :label="$t('push.title')" header-align="center" align="center"></el-table-column>
			<el-table-column prop="content" :label="$t('push.content')" header-align="center" align="center"></el-table-column>
			<!-- <el-table-column prop="payload" :label="$t('push.payload')" header-align="center" align="center"></el-table-column> -->
			<el-table-column prop="push_names" :label="$t('push.push_clientids')" header-align="center" align="center" width="250">
                <template #default="scope">
					<div v-if="scope.row.type == 'all'">{{ $t('push.alluser') }}</div>
					<div v-else-if="scope.row.type == 'ios'">{{ $t('push.iosuser') }}</div>
					<div v-else-if="scope.row.type == 'android'">{{ $t('push.anduser') }}</div>
                    <div v-else class="w100 flex flexC">
                        <el-tooltip
                            effect="dark"
                            :content="scope.row.push_names"
                            placement="top"
                        >
                            <div style="width: 200px;" class="text-cut textC">{{ scope.row.push_names }}</div>
                        </el-tooltip>
                    </div>
				</template>
            </el-table-column>
			<!-- <el-table-column prop="push_system" :label="$t('push.push_system')" header-align="center" align="center">
                <template #default="scope">
					<span>{{ $t(scope.row.push_system) }}</span>
				</template>
            </el-table-column> -->
			<el-table-column prop="push_result" :label="$t('push.push_result')" header-align="center" align="center" width="150">
                <template #default="scope">
					<span v-if="scope.row.push_result">{{ $t(scope.row.push_result) }}</span>
				</template>
            </el-table-column>
			<!-- <el-table-column :label="$t('table.Operation')" fixed="right" header-align="center" align="center" width="250">
				<template #default="scope">
					<el-button class="mb5" type="default" size="small" @click="handleOption(scope.row, 4)" v-if="hasRule('PageUser/Index/Index/rate')">{{ $t('invite.setRate') }}</el-button>
					<el-button class="mb5" type="default" size="small" @click="handleOption(scope.row, 5)" v-if="hasRule('PageUser/Index/Index/rate')">{{ $t('invite.setRenRate') }}</el-button>
				</template>
			</el-table-column> -->
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="setTotal"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
	</div>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import { reactive, ref, onActivated, onBeforeMount, computed, onMounted, nextTick } from 'vue'
import store from '@/store'
import { Storage } from '@/utils/storage'
import { hasRule, showMsgByServer } from '@/utils/tool'
import { IHooksOptions } from '@/hooks/interface'
import { ElMessageBox, ElMessage } from 'element-plus'
import { postApi } from '@/api/api'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const prop = defineProps({
	scrollTop:{
		type: Number,
		default: 0
	}
})
const emit = defineEmits(['setScroll'])
interface ListItem {
	id: Number
	value: string
	label: string
}
const activeName = ref('tab1')
const tableHeight = ref(0)
const formRef = ref()
const tableRef = ref()
const userPermissionRef = ref()
const shiftList: any = ref([])
const setList = computed(() => {
	state.dataList?.forEach(item => {
		if (item.product_pics) {
			item.product_pics_list = item.product_pics.split(',')
		} else {
			item.product_pics_list = []
		}
	})
	return state.dataList
})
const setTotal = computed(() => {
	return state.total
})

const resetDataForm: any = ref({
	id: '',
	email: '',
	newPassword: '',
	confirmPassword: ''
})
const freezeDataForm: any = ref({
	id: '',
	email: '',
	duration: 3
})

const visible = ref(false)
const visible2 = ref(false)
const btnloading = ref(false)
const freezeType = ref(1) // 1冻结，2解冻
const setDjTitle = ref('')
const resetDataFormRef: any = ref(null)
const state: IHooksOptions = reactive({
	dataListUrl: '/api/push/list',
	deleteUrl: '',
	queryForm: {
		buyer_name:'',
		up_user:'',
		up_up_user:'',
		commission_user_name:'',
	}
})
const datepickersRef = ref()
const addOrUpdateRef = ref()
const exportExcelRef = ref()
const addOrUpdateHandle = (row: any, isCopy: any) => {
	addOrUpdateRef.value.init(row, isCopy)
}
const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
  console.log(multipleSelection.value);
}
// 开始搜索
const getDataListTab = () => {
  	state.dataList = [];
	// state.queryForm.up_user = state.queryForm.buyer_name;
	// state.queryForm.up_up_user = state.queryForm.buyer_name;
	// state.queryForm.commission_user_name = state.queryForm.buyer_name;
	getDataList()
}
// 重置搜索
const resetSearchTab = () => {
	datepickersRef.value.clear()
	// state.queryForm.buyer_name = '';
	// state.queryForm.up_user = '';
	// state.queryForm.up_up_user = '';
	// state.queryForm.commission_user_name = '';
	getDataList()
}
const pageLoad = ref(false) // 页面初始化完成
onMounted(() => {
	nextTick(() => {
        console.log(22);
		pageLoad.value = true
		tableHeight.value = store.appStore.clientHeight + 35
		tableRef.value.doLayout()
	})
})
onActivated(() => {
	if (pageLoad.value) {
		getDataList()
	}
})
const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle, resetSearch } = useCrud(state)
</script>
<style lang="scss" scoped>
.content-box{
	:deep(){
		.el-tabs__item{
			background: #fff;
		}
	}
}
</style>
